<template>
  <div class="m-active">
    <div class="m-active-tit">热门活动</div>
    <div class="m-active-card">
      <div class="m-active-card-item">
        <img src="../test-image/active-1.png">
      </div>
      <div class="m-active-card-item">
        <img src="../test-image/active-2.png">
      </div>
      <div class="m-active-card-item">
        <img src="../test-image/active-3.png">
      </div>
      <div class="m-active-card-item">
        <img src="../test-image/active-4.png">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'mall-active'
}
</script>

<style scoped lang="less">
.m-active{
  margin-top: .16rem;
  background: #fff;
}
.m-active-tit{
  padding: .28rem .28rem 0 .28rem;
  font-size: .3rem;
  font-weight: 600;
}
.m-active-card{
  display: flex;
  flex-wrap: wrap;
  padding: .28rem .28rem .26rem .28rem;
}
.m-active-card-item{
  height: 2.56rem;
  flex-basis: 50%;
  background: #f5f5f5;
  margin-bottom: .04rem;
  position: relative;
  img{
    width: 100%;
    height: 100%;
  }
  &:nth-child(2n){
    &:after{
      content: '';
      position: absolute;
      width: .04rem;
      height: 100%;
      left: -0.02rem;
      background: #fff;
    }
  }
}
</style>
